<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <title>诚赉健康OA管理</title>
    <link rel="stylesheet" href="../css/vant.css">
    <link rel="stylesheet" href="./css/submitApply.css">

</head>

<body>
    <div id="app" v-cloak>
        <van-nav-bar title="添加审批" left-arrow @click-left="onClickLeft"></van-nav-bar>
        <div class="formBox">
            <div>
                <span>申请人：</span>
                <input type="text" v-model="applyForm.userName" placeholder="请输入申请人">
            </div>
            <div>
                <span>所属部门：</span>
                <input type="text" v-model="applyForm.department" placeholder="请输入所属部门">
            </div>
            <div>
                <span>申请简述：</span>
                <input type="text" v-model="applyForm.projectName" placeholder=" 请输入审批项目">
            </div>
            <div class="textBox">
                <span>详细内容：</span>
                <textarea v-model="applyForm.projectDetail" placeholder=" 请输入详细内容"></textarea>
            </div>
            <div class="textBox">
                <span>审核部门：</span>
                <div class="checkBoxDiv">
                    <van-checkbox-group v-model="applyForm.selectDepartmentIds" direction="horizontal">
                        <van-checkbox :name="item.adepartmentId" v-for="(item,index) in departmentList"
                            :key="index">{{item.adepartmentName}}
                        </van-checkbox>
                    </van-checkbox-group>
                </div>
            </div>
        </div>
        <div class="btnBox">
            <div @click="submitHandle">提交</div>
            <div @click="resHandle">重置</div>
        </div>


        <div class="loading" v-if="mask">
            <img src="../img/load.gif">
        </div>
    </div>


    <script src="../js/vue.min.js"></script>
    <script src="../js/flex_ible/lib-flexible.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/vant.min.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/ajax.js"></script>
    <script>
        Vue.use(VueLazyload);
        var vm = new Vue({
            el: "#app",
            data: {
                mask: false,
                applyForm: {
                    userName: '',
                    department: '',
                    projectName: '',
                    projectDetail: '',
                    applyTime: '',
                    selectDepartmentIds: []
                },
                departmentList: [],
                userInfo: ''
            },
            created() {
                this.getDepartment()
                this.userInfo = JSON.parse(sessionStorage.applyUserInfo)
                console.log(this.userInfo);

            },
            methods: {
                // 提交
                submitHandle() {
                    if (this.applyForm.userName == '') {
                        this.$toast('请输入申请人');
                        return false;
                    }
                    if (this.applyForm.department == '') {
                        this.$toast('请输入所属部门');
                        return false;
                    }
                    if (this.applyForm.projectName == '') {
                        this.$toast('请输入审批项目');
                        return false;
                    }
                    if (this.applyForm.projectDetail == '') {
                        this.$toast('请输入详细内容');
                        return false;
                    }
                    if (this.applyForm.selectDepartmentIds == []) {
                        this.$toast('请选择审核部门');
                        return false;
                    }

                    this.applyForm.applyTime = this.getTime();

                    console.log(this.applyForm);

                    console.log(this.applyForm.selectDepartmentIds.join(','));


                    // return

                    var that = this;
                    that.mask = true
                    ajax({
                        type: "post",
                        url: newUrl + "varia/addApproval",
                        data: {
                            userId: that.userInfo.aduserId,
                            userName: that.applyForm.userName,
                            projectName: that.applyForm.projectName,
                            currentState: 0,
                            applyTime: that.applyForm.applyTime,
                            department: that.applyForm.department,
                            nextBit: that.applyForm.selectDepartmentIds.join(','),
                            editType: 0,
                            projectDetail: that.applyForm.projectDetail,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                that.$toast('提交成功');
                                that.mask = false
                                setTimeout(() => {
                                    that.onClickLeft()
                                }, 250);
                            } else {
                                that.$toast('提交失败');
                            }
                            that.isShow = false
                        },
                    })

                },
                // 重置表单
                resHandle() {
                    this.applyForm = {
                        userName: '',
                        department: '',
                        projectName: '',
                        projectDetail: '',
                        applyTime: ''
                    }
                    this.$toast('重置成功');
                },
                // 返回主页
                onClickLeft() {
                    window.location.replace("https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9cf9f21ba0cbf62b&redirect_uri=https://www.ccclkj.cn/sharepage/OA/index.html&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect")
                },
                // 获取当前时间
                getTime() {
                    var stamp = new Date().getTime() + 8 * 60 * 60 * 1000;
                    var beijingTime = new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
                    console.log(beijingTime);
                    return beijingTime
                },
                // 获取部门
                getDepartment() {
                    var that = this;
                    that.mask = true
                    ajax({
                        type: "post",
                        url: newUrl + "varia/getAdepartment",
                        data: {

                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                that.mask = false
                                console.log(res.data);
                                that.departmentList = res.data.filter(item => {
                                    return item.adepartmentType == 0
                                })

                            } else {
                                that.$toast('查询失败');
                            }
                        },
                    })
                },
            }
        })

    </script>

</body>

</html>